<div  id="xk-yhhx-2" style="height: 450px;width: 100%;display: block"></div>





<script>

    // todo

    // 颜色背景  -- 白色
    // lable  点击事件 --
    // 纳税人 名称位置颜色调整  --
    // lable 指定颜色  --

    // 逻辑代码
    // 大小不能响应

    //加载 controller 目录下的对应模块
    /*
      小贴士：
        这里 console 模块对应 的 console.js 并不会重复加载，
        然而该页面的视图则是重新插入到容器，那如何保证能重新来控制视图？有两种方式：
          1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
          2): 直接在 layui.use 方法的回调中书写业务代码，即:
              layui.use('console', function(){
                //同 console.js 中的 layui.define 回调中的代码
              });
      这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。
    */
    function search(obj) {
        // 获取虚开数据
        let dataArr = [];
        $.ajax({
            url: layui.setter.hostAddr + `/portal/sql/select`,
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(obj),
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
            },
            type: 'POST',
            success: function (res) {
                dataArr = res.data
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //通常情况下textStatus和errorThrown只有其中一个包含信息
                console.log(textStatus);   //调用本次ajax请求时传递的options参数
                console.log(errorThrown);   //调用本次ajax请求时传递的options参数
                doFail()
            }

        })
        return dataArr
    }

    let sqlobj = {
        "sql": `select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc
            from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '202010' and  '202012'  `,
        "keyword": ""
    }
    let tableData = search(sqlobj)

    let allTzObj = search({
        "sql": `select * from xcdw_dim.dim_nsrfxtzz`,
        "keyword": ""
    })

    var fxtzObj, fxtzDetaillis = [], currentNsr;

    let echarts = layui.echarts;
    // 指定图表的配置项和数据
    let img = '';
    let imgSrc = '';
    let biao = ''
    let color = [
        // '#00ffff',
        // '#00cfff',
        // '#1abc9c',
        // '#006ced',
        // '#9b59b6',
        // '#3498db',
        // '#ffe000',
        // '#ffa800',
        // '#ff5b00',
        '#2b8a3e',
        '#c92a2a',
        // '#ff3000'
    ]

    layui.use(['admin', 'table', 'echarts'], function () {
        var table = layui.table;
        var admin = layui.admin;
        var view = layui.view;
        var echarts = layui.echarts;
        table.render({
            elem: '#test-table-xk'
            // , url: './json/table/user.js'
            , data: tableData
            , page: true
            // ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {
                    field: 'zizeng',
                    width: 80,
                    title: '序号',
                    event: 'setnsrsbh',
                    type: 'numbers',
                    fixed: 'left',
                    templet: '#zizeng'
                }
                , {field: 'nsrsbh', title: '纳税人识别号', event: 'setnsrsbh', style: 'cursor: pointer;'}
                , {field: 'nsrmc', event: 'setnsrsbh', title: '纳税人名称'}
            ]]
            , height: 450
        });

        //监听单元格事件
        table.on('tool(test-table-xk)', function (obj) {
            debugger
            let data = obj.data;
            var elementsLis = []
            if (obj.event === 'setnsrsbh') {
                var nsrobj = {
                    'sql': `select  a.fxtzznrms ,b.tzz_mc ,b.tzz_dm
                            from xcdw_app.app_xkyc_fxnsrtzz a
                            left join xcdw_dim.dim_nsrfxtzz b  on a.tzz_dm = b.tzz_dm
                            where ssyf between '202010' and  '202012' and nsrsbh = '${data.nsrsbh}'`,
                    "keyword": ""
                }
                currentNsr = data.nsrmc
                fxtzObj = search(nsrobj)
                buildEcharts(fxtzObj)

            }

        });

        function buildEcharts(fxtzObj) {
            let myChart = echarts.init(document.getElementById('xk-yhhx-1'));
            myChart.clear()
            let dataArr = [];
            let haveTz = []
            fxtzObj.forEach((item, index) => {
                if (haveTz.indexOf(item.tzz_dm) === -1) {
                    haveTz.push(item.tzz_dm)
                }
                if (fxtzDetaillis.indexOf(item.fxtzznrms) === -1) {
                    fxtzDetaillis.push(item.fxtzznrms)
                }

            })
            for (var i = 0; i < allTzObj.length; i++) {
                dataArr.push({
                    value: 921,
                    name: allTzObj[i].tzz_mc,
                    itemStyle: {
                        normal: {
                            color: haveTz.indexOf(allTzObj[i].tzz_dm) === -1 ? color[0] : color[1]
                        }
                    }
                })
            }
            let seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                avoidLabelOverlap: true,
                radius: [105, 109],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        // label: {
                        //     // formatter: '{a|'+ "数据展示" +'}{abg|}\n{hr|}\n  {b|{b}}  ',
                        //     formatter: '{b|{b}} \n{sj|}',
                        //     show: true,
                        //     width: 210,
                        //     height: 80,
                        //     padding: [-33, -4, 0, 0],
                        //     backgroundColor: "#fff",
                        //     shadowColor: "#D6DAE0",
                        //     shadowBlur: 4,
                        //     borderRadius: 5,
                        //     position: "top",
                        //     // backgroundColor: '#eee',
                        //     // borderColor: '#aaa',
                        //     // borderWidth: 1,
                        //     // borderRadius: 4,
                        //     // shadowBlur:3,
                        //     // shadowOffsetX: 2,
                        //     // shadowOffsetY: 2,
                        //     // shadowColor: '#999',
                        //     // padding: [0, 7],
                        //     // rich: {
                        //     //     a: {
                        //     //         color: '#fff',
                        //     //         fontSize: 16,
                        //     //         lineHeight: 32,
                        //     //         align: 'center'
                        //     //     },
                        //     //     abg: {
                        //     //         backgroundColor: '#333',
                        //     //         width: '100%',
                        //     //         align: 'right',
                        //     //         height: 32,
                        //     //         borderRadius: [4, 4, 0, 0]
                        //     //     },
                        //     //     hr: {
                        //     //         borderColor: '#fff',
                        //     //         width: '100%',
                        //     //         borderWidth: 0.5,
                        //     //         height: 0
                        //     //     },
                        //     //     b: {
                        //     //         fontSize: 16,
                        //     //         color: '#000',
                        //     //         lineHeight: 33
                        //     //     }
                        //     // }
                        //     rich: {
                        //         b: {
                        //             color: "#515151",
                        //             fontWeight: 600,
                        //             fontSize: 14,
                        //             lineHeight: 30,
                        //             padding: [-90, 0, 0, 30],
                        //             align: "left",
                        //         },
                        //         sj: {
                        //             backgroundColor: {
                        //                 image: biao,
                        //             },
                        //             align: "left",
                        //             width: 30,
                        //             height: 30,
                        //         },
                        //         value: {
                        //             lineHeight: 0,
                        //             fontSize: 14,
                        //             padding: [-110, 0, 0, 10],
                        //         },
                        //     }
                        // },
                        label: {
                            show: true,
                            position: 'outside',
                            fontSize: 8,
                            rich: {
                                a: {
                                    fontSize: 12,
                                    //lineHeight: myFontSize,
                                }
                            },
                            formatter: '\n{a|{b}}\n',

                            // color: '#ddd',
                            // formatter: function(params) {
                            //     var percent = 0;
                            //     var total = 0;
                            //     for (var i = 0; i < trafficWay.length; i++) {
                            //         total += trafficWay[i].value;
                            //     }
                            //     percent = ((params.value / total) * 100).toFixed(0);
                            //     if(params.name !== '') {
                            //         return params.name;
                            //     }else {
                            //         return '';
                            //     }
                            // },
                        },
                        labelLine: {
                            length: 30,
                            length2: 80,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: dataArr
            }];
            let option = {
                // backgroundColor: '#0A2E5D', // 背景颜色,白
                title: {
                    text: currentNsr,
                    textStyle: {
                        color: '#8f8da4',
                    },
                    left: 'center',
                    top: '90%'
                    // color:'#ddd'
                },
                color: color,
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 178,
                            height: 178
                        },
                        left: 'center',
                        top: 'center',
                        position: [100, 100]
                    },
                        {
                            type: "image",
                            z: 4,
                            style: {
                                image: imgSrc,
                                width: 178,
                                height: 178
                            },
                            left: 'center',
                            top: 'center',
                            position: [100, 100]
                        }]
                },
                tooltip: {
                    show: false
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }

            // 使用刚指定的配置项和数据显示图表。
            // window.addEventListener("resize", function () {
            //     myChart.resize();
            // });
            // document.getElementById('xk-yhhx-1').addEventListener("resize", function () {
            //     myChart.resize();
            // });

            myChart.setOption(option);

            myChart.off('click');
            myChart.on('click', function (params) {

                let fxtzDetail = ""
                console.log(fxtzObj)
                let tzName = params.name;
                fxtzObj.forEach((item, index) => {
                    debugger
                    if (item.tzz_mc === tzName) {
                        fxtzDetail += `<p>${item.fxtzznrms}</p>`
                    }
                })
                debugger
                if (fxtzDetail.length > 0) {
                    layer.open({
                        title: tzName
                        , type: 1
                        , area: ['700px', '450px']
                        , fixed: false //不固定
                        , maxmin: true
                        , offset: 'ct'
                        , id: 'help'
                        , content: fxtzDetail
                        , btn: '关闭'
                        , btnAlign: 'c'
                        , shade: 0.2
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                }

            });

        }


        $('tr:eq(1) td:eq(1)').click()


    });


</script>




